<template>
  <div class="container">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="用户昵称">
        <template slot-scope="scope">
          <el-avatar size="small" :src="scope.row.headimgurl"></el-avatar>
          <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户id" prop="openid"> </el-table-column>
      <el-table-column label="邀请用户数" prop="hscore"> </el-table-column>
      <el-table-column label="付费用户数" prop="score"> </el-table-column>
      <el-table-column label="收益（元）">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.totalAmount | price
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class=" pagination"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getRankList } from "../api/rankList";
export default {
  name: "Ranklist",
  data() {
    return {
      tableData: [],
      pageSize: 0,
      total: 0,
      activeId: "",
      pageNum: 1,
    };
  },
  filters: {
    price: (price) => {
      price = price !== undefined ? price / 100 : 0;
      return price + "元";
    },
  },
  methods: {
    getRankList(pageNum, activeId) {
      getRankList(pageNum, activeId).then((v) => {
        const data = JSON.parse(v.data);
        this.tableData = data.respMsg.list;
        console.log(data.respMsg.list);
        this.total = data.respMsg.pagInfo.total;
      });
    },
    handleCurrentChange(val) {
      this.getRankList(val, this.activeId);
    },
  },
  created() {
    this.activeId = this.$route.params.id;
    this.getRankList(this.pageNum, this.activeId);
  },
};
</script>
<style scoped>
.pagination {
  float: right;
  margin-top: 30px;
  margin-right: 100px;
}
.container {
  width: 80%;
  margin: 0 auto;
}
</style>
